<template>
    <div class="completeProfile">
        <div class='moduleHead'>
            <span>{{language.completeProfile_title}}</span>
        </div>
        <div class="body">
            <div class="textarea_box">
                <div class="textarea_line">
                    <p>{{language.unify_headline}} </p>
                    <textarea @input="isSubmitDesable" v-model="submitObj.title" spellcheck="false" autocapitalize="off" :placeholder="language.completeProfile_headlinePlace"></textarea>
                </div>
                <div class="textarea_line">
                    <p>{{language.unify_aboutMe}}</p>
                    <textarea @input="isSubmitDesable" v-model="submitObj.about" spellcheck="false" autocapitalize="off" :placeholder="language.completeProfile_aboutMePlace"></textarea>
                </div>
                <div class="textarea_line">
                    <p>{{language.unify_aboutMyMatch}}</p>
                    <textarea @input="isSubmitDesable" v-model="submitObj.match_about" spellcheck="false" autocapitalize="off" :placeholder="language.completeProfile_aboutMyMatchPlace"></textarea>
                </div>
                <button @click="submitData" class="btn" :class="{submitDesable:submitDesable}">
                    <loading :props="{show:loadingAjax,type:'btn'}"></loading>
                    {{language.completeProfile_LetsStarted}}
                </button>
            </div>
        </div>
        <publicDialog :props="dialogData"></publicDialog>
    </div>
</template>
<script>
import * as API from '../api'
import loading from './Loading'
import publicDialog from './PublicDialog'

export default {

    name: 'completeProfile',

    components: {
        publicDialog,
        loading
    },

    data() {
        return {
            submitObj: {
                title: '',
                about: '',
                match_about: '',
            },
            dialogData:{},
            loadingAjax: false,
            submitDesable: true
        }
    },

    activated() {
        var userInfoAbout = this.$store.state.user.userInfo.about;
        this.submitObj.title = userInfoAbout.headline;
        this.submitObj.about = userInfoAbout.about_me;
        this.submitObj.match_about = userInfoAbout.about_my_match;
        this.isSubmitDesable();
        this.dialogData = {};
    },

    methods: {

        submitData() {
            var tthis = this;
            if (!this.submitDesable && !this.loadingAjax) {
                this.loadingAjax = true;
                let userInfo = Unit.getObjSessionStorage('ms_myself'),
                    obj = {
                        data: this.submitObj,
                        processData: function(data) {
                            if (data.errcode) {
                                tthis.dialogData = {
                                    position: 'top',
                                    type: 'error',
                                    content: {
                                        info: data.errmsg,
                                    }
                                };
                                return;
                            } else if (data.errs) {
                                tthis.dialogData = {
                                    position: 'top',
                                    type: 'error',
                                    content: {
                                        info: data.errs[0].errmsg,
                                    }
                                };
                                return;
                            } else if (data.results) {
                                userInfo.about.headline = data.data.title;
                                userInfo.about.about_me = data.data.about;
                                userInfo.about.about_my_match = data.data.match_about;
                                return userInfo;
                            }
                        },
                        callback: function(data) {
                            if (userInfo.pictures.length < 1) {
                                tthis.$router.push({
                                    name: 'completeProfileTwo'
                                });
                            } else {
                                tthis.$router.push({
                                    name: 'me'
                                });
                            }
                        },
                        complete: function() {
                            tthis.loadingAjax = false;
                        }
                    }
                this.$store.dispatch('user_updateProfile', obj);
            }
        },

        isSubmitDesable() {
            var submitObj = this.submitObj;
            if (submitObj.title.trim().length < 10 || submitObj.about.trim().length < 10 || submitObj.match_about.trim().length < 10) {
                this.submitDesable = true;
            } else {
                this.submitDesable = false;
            }
        }
    },
}

</script>
<style scoped>
.completeProfile {
    padding-top: 44px;
}

.completeProfile .list_warapper {
    margin-top: 16px;
    background-color: #fff;
    color: #474747;
    font-size: 16px;
    padding: 0 20px;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}

.completeProfile .textarea_box {
    padding: 20px;
}

.completeProfile .textarea_line {
    margin-bottom: 10px;
}

.completeProfile .textarea_line p {
    line-height: 34px;
    color: #222;
    font-size: 17px;
}

.completeProfile .textarea_box textarea {
    width: 100%;
    resize: none;
    height: 70px;
    color: #333;
    font-size: 15px;
}

.completeProfile .textarea_box textarea::-webkit-input-placeholder,
.completeProfile .textarea_box textarea::-moz-input-placeholder {
    color: #afafaf;
}

.completeProfile button {
    width: 80%;
    margin: auto;
    display: block;
}

.completeProfile button.submitDesable {
    background: #a5a5a5;
}

</style>
